<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>农污处理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/admin.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <blockquote class="layui-elem-quote">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input class="layui-input searchval" type="text" placeholder="请输入搜索的内容">
                        </div>
                        <button class="layui-btn" type="button" id="search_btn"><i class="lifechain"></i>搜索</button>
                        <button class="layui-btn" id="zaixian_btn" data-type="reload">在线</button>
                        <button class="layui-btn" id="lixian_btn" data-type="reload">离线</button>
                    </div>
                </blockquote>
             </div>
            <div class="layui-fluid layadmin-cmdlist-fluid" style="padding-bottom: 15px;">
                <div class="layui-row layui-col-space30" id="searchImage">
                </div>
            </div>
            <div id="laypageimage" style="padding-left: 15px;"></div>
        </div>
    </div>
</div>
<input type="hidden" id="curnum" value="1">


<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    layui.use(['laydate', 'table', 'form', 'layer', 'laypage'], function () {
        var videoState = 1;
        var laydate = layui.laydate
            , $ = layui.$
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laypage = layui.laypage;

        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/rest/smoke/getLined",
            dataType: "json",
            async: false,
            data: "key=&page=1&limit=12&sxtzt="+videoState,
            success: function (res) {
                if (res.data != null) {
                    $("#searchImage").empty()
                    for (var i = 0; i < res.data.length; i++) {
                        var id = "imageHtml" + i;
                        var ids = "image" + i;
                        var oneData = res.data[i]
                        var imageHtml = '<div class="layui-col-md2" style="padding-bottom: 0px;"><div class="layui-carousel" id="' + id + '"  lay-filter="' + id + '" ><div  id="' + ids + '" ></div></div>' +
                            '<div class="cmdlist-text" style="line-height: 24px;text-align: center;">' +
                            '<a href="javascript:;" onclick=openCCTV("' + oneData.videotid + '","' + oneData.videoUrl + '","' + oneData.cun + '");>' +
                            '<span style="font-size: 16px;">' + oneData.cun +
                            '</span><br>' +
                            '<span style="font-size: 16px;color: green;">' + oneData.videotid +
                            '</span>' +
                            '</a>' +
                            '</div>';
                        $("#searchImage").append(imageHtml)
                    }
                    for (var i = 0; i < res.data.length; i++) {
                        var oneData = res.data[i]
                        var images = '<img src="<%=request.getContextPath()%>/huazhi/images/shexiangtou.gif"  onclick=openCCTV("' + oneData.videotid + '","' + oneData.videoUrl + '","' + oneData.cun + '"); style="cursor:pointer;width:100%;height:50%;border:1px solid #ccc;padding:2px;"/>';
                        $("#image" + i).append(images)
                    }

                    laypage.render({
                        elem: 'laypageimage'
                        , first: '首页'
                        , last: '尾页'
                        , groups: 5
                        , count: res.count
                        , curr: 1
                        , limit: 12
                        , layout: ['prev', 'page', 'next', 'skip', 'count']
                        , jump: function (obj, first) {
                            if (!first) {
                                curnum = obj.curr;
                                limitcount = obj.limit;
                                search(searchval, limitcount, curnum,videoState);
                            }
                        }
                    })

                }
            }
        })


        var searchval = $('.searchval').val();
        var curnum = 1;
        var limitcount = 12;

        function search(searchval, limitcount, curnum,videoState) {

            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/smoke/getLined",
                dataType: "json",
                async: false,
                data: "key=" + searchval + "&page=" + curnum + "&limit=" + limitcount+"&sxtzt="+videoState,
                success: function (res) {
                    if (res.data != null) {
                        $("#searchImage").empty()
                        for (var i = 0; i < res.data.length; i++) {
                            var id = "imageHtml" + i;
                            var ids = "image" + i;
                            var oneData = res.data[i]
                            var imageHtml = '<div class="layui-col-md2" style="padding-bottom: 0px;"><div class="layui-carousel" id="' + id + '"  lay-filter="' + id + '" ><div  id="' + ids + '" ></div></div>' +
                                '<div class="cmdlist-text" style="line-height: 24px;text-align: center;">' +
                                '<a href="javascript:;" onclick=openCCTV("' + oneData.videotid + '","' + oneData.videoUrl + '","' + oneData.cun + '");>' +
                                '<span style="font-size: 16px;">' + oneData.cun +
                                '</span><br>' +
                                '<span style="font-size: 16px;color: green;">' + oneData.videotid +
                                '</span>' +
                                '</a>' +
                                '</div>';
                            $("#searchImage").append(imageHtml)
                        }
                        for (var i = 0; i < res.data.length; i++) {
                            var oneData = res.data[i]

                            var images = '<img src="<%=request.getContextPath()%>/huazhi/images/shexiangtou.gif"  onclick=openCCTV("' + oneData.videotid + '","' + oneData.videoUrl + '","' + oneData.cun + '"); style="cursor:pointer;width:100%;height:50%;border:1px solid #ccc;padding:2px;"/>';
                            $("#image" + i).append(images)
                        }

                        laypage.render({
                            elem: 'laypageimage'
                            , first: '首页'
                            , last: '尾页'
                            , groups: 5
                            , count: res.count
                            , curr: curnum
                            , limit: limitcount
                            , layout: ['prev', 'page', 'next', 'skip', 'count']
                            , jump: function (obj, first) {
                                if (!first) {
                                    curnum = obj.curr;
                                    limitcount = obj.limit;
                                    search(searchval, limitcount, curnum,videoState);
                                }
                            }
                        })

                    }
                }
            })
        }

        $("#search_btn").on('click', function () {
            var searchval = $('.searchval').val();
            var curnum = 1;
            var limitcount = 12;
            search(searchval, limitcount, curnum,videoState);
        });
        $('#zaixian_btn').on('click', function () { //审批
           videoState = 1
            search(searchval, limitcount, curnum,videoState);
        });

        $('#lixian_btn').on('click', function () { //审批
            videoState = 0
            search(searchval, limitcount, curnum,videoState);
        });


    });

    function openCCTV(videotid, videoUrl,cun) {
        layui.layer.open({
            title:cun+"污水实时监控",
            type: 2,
            area: ['100%', '100%'],
            content: '<%=request.getContextPath()%>/huazhi/js/lay-module/OpenCctv.jsp',
            <%--content: '<%=request.getContextPath()%>/rest/getRoute?type=log&url=OpenCctv',--%>
            shade: 0.8,
            anim: 4,
            skin: 'layui-layer-molv',
            resize: true,
            move: false,
            maxmin: true,
            success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
                var iframe = window['layui-layer-iframe' + index];
                iframe.child(videotid, videoUrl);
            }
        });


    }
</script>
</body>
</html>